<!-- 详情 -->
<template>
  <div class="detailsBox" v-loading="loading">
    <!-- 需求信息 -->
    <Descriptions
      :title="$i18n.t('mesRequirePlan.demandInformation')"
      :list="requireList"
      :status="statusName"
      :type="statusType"
    />
    <div class="flex-box">
      <!-- <div class="image__preview">
        <el-image
          style="width: 65px; height: 65px;"
          :src="url"
          :preview-src-list="srcList"
        >
        </el-image>
      </div> -->
      <Descriptions :list="requireList2" />
    </div>
    <!-- 需求信息end -->
    <div class="p-t-10" v-if="tabPaneList && tabPaneList.length">
      <Title :title="$i18n.t('mesRequirePlan.productionInformation')" class="p-b-10" />
      <!-- <Title title="生产排期" /> -->

      <el-tabs
        :tab-position="tabPosition"
        style="height: 600px;"
        @tab-click="tabClick"
      >
        <el-tab-pane
          :label="ite.deliveryDate + $i18n.t('mesRequirePlan.productionScheduling') + ite.scheduledNum + $i18n.t('mesRequirePlan.piece')"
          v-for="(ite, i) in tabPaneList"
          :key="i"
        >
          <el-tabs type="border-card">
            <el-tab-pane :label="$i18n.t('mesRequirePlan.sequentialChart')">
              <TimingDiagram :data="queryData"></TimingDiagram>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('mesRequirePlan.list')">
              <el-table :data="tableData" border height="440px">
                 <el-table-column
                  key="12"
                  prop="planCode"
                  align="center"
                  :label='$i18n.t("mesProdOrderPlan.productionOrderCode")'
                  width="200"
                  fixed="left"
                 
                >
                <template v-slot:default='{row}'>
                  <div slot="reference" style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                    <p style="color: #3c7fcd; width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor:pointer"
                      @click="goTo(row)"
                    >
                    {{row.planCode}}
                  </p>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  v-for="(ite, i) in column2"
                  :key="i"
                  :prop="ite.prop"
                  align="center"
                  :label="ite.label"
                  :width="ite.width || ''"
                  :fixed="ite.fixed"
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Title from "./components/title.vue";
import Descriptions from "./components/descriptions.vue";
import TimingDiagram from "./components/timingDiagram.vue";
import { popover } from "@/utils/judge";
import {
  getPlanStatusList,
  getRequirePlanPreList,
  getDetail,
} from "@/api/order/mesRequirePlan";
export default {
  name: "",
  components: { Descriptions, Title, TimingDiagram },
  data() {
    return {
      loading: false,
      tabPosition: "left",
      queryData: {},
      requireList: [
        {
          label: $i18n.t('mesRequirePlan.demandNumber'),
          prop: "requireCode",
          value: "-",
        },
        {
          label: $i18n.t('common.planDeliveryDate'),
          prop: "deliveryDate",
          value: "-",
        },
        {
          label: $i18n.t('mesRequirePlan.customer'),
          prop: "customerName",
          value: "-",
        },
        // {
        //   label: "生产工厂",
        //   prop:"requireCode",
        //   value: "",
        // },
        {
          label: $i18n.t('mesRequirePlan.createByName'),
          prop: "createByName",
          value: "-",
        },
        {
          label: $i18n.t('common.createTime'),
          prop: "createTime",
          value: "-",
        },
      ],
      requireList2: [
        {
          label: $i18n.t('mesRequirePlan.prodCode'),
          prop: "prodCode",
          value: "-",
        },
        {
          label: $i18n.t('mesRequirePlan.prodName'),
          value: "-",
          prop: "prodName",
        },
        {
          label: $i18n.t('common.quantity'),
          prop: "quantity",
          value: "-",
        },
        {
          label: $i18n.t('mesRequirePlan.scheduledNum'),
          prop: "scheduledNum",
          value: "-",
        },
        {
          label: $i18n.t('common.unit'),
          prop: "unit",
          value: "-",
        },
      ],
      statusName: "",
      statusType: "",
      tableData: [],
      column2: [
        // {
        //   label: $i18n.t('mesRequirePlan.planCode'),
        //   prop: "planCode",
        //   showOverflowTooltip: true,
        //   fixed: "left",
        //   width: 160,
        //   render: (h, { row }) => {
        //     return popover(row.planCode, h, "", () => this.goTo(row));
        //   }
        // },
        {
          label: $i18n.t('common.materialCode'),
          prop: "prodCode",
          width: 160,
        },
        {
          label: $i18n.t('common.materialName'),
          prop: "prodName",
       
        },
        {
          label: $i18n.t('common.workshop'),
          prop: "workshopName",
          width: 160,
          // fixed: "right",
        },
        {
          label: $i18n.t('common.line'),
          prop: "lineName",
     
          // fixed: "right",
        },
        // {
        //   label: "制造方式",
        //   prop: "manufactureMethodName",
        // },
        // {
        //   label: "产品类型",
        //   prop: "materialTypeName",
        // },
        {
          label: $i18n.t('common.unit'),
          prop: "unit",
          width: 80,
        },
        {
          label: $i18n.t('common.planQty'),
          prop: "quantity",
          width: 80,
          fixed: "right",
        },
        // {
        //   label: "已产数量",
        //   prop: "scheduledNum",
        //   width: 80,
        //   fixed: "right",
        // },
        {
          label: $i18n.t('mesRequirePlan.beginDate'),
          prop: "planBeginDate",
          width: 100,
          fixed: "right",
        },
        {
          label: $i18n.t('mesRequirePlan.endDate'),
          prop: "planEndDate",
          width: 100,
          fixed: "right",
        },
      ],
      tabPaneList: [],
      requireStatus: "",
    };
  },
  methods: {
    //跳转详情页
    goTo(row) {
      this.$router.push({
        path: "/order/mesProdOrderPlan/see",
        query: { id: row.planCode },
      });
    },
    async getDetail() {
      let res = await getDetail(this.$route.query.id);
      try {
        let { mesRequireScheduledRecords, requireStatus } = res.data.result;
        this.requireStatus = requireStatus;
        this.tabPaneList = mesRequireScheduledRecords;

        this.requireList.map((ite) => {
          ite.value = res.data.result[ite.prop];
        });
        this.requireList2.map((ite) => {
          ite.value = res.data.result[ite.prop];
        });

        if (this.tabPaneList.length) {
          // 默认查询第一个
          let { scheduledCode } = this.tabPaneList[0];
          this.getRequirePlanPreList({
            scheduledCode,
            requireCode: this.tabPaneList[0].requireCode,
          });
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 获取排期情况(时序图、table)
    async getRequirePlanPreList({ scheduledCode, requireCode }) {
      try {
        this.loading = true;
        let res = await getRequirePlanPreList({ scheduledCode, requireCode });
        let { timeList, mesRequireOrderPlanPreList } = res.data.result;
        this.tableData = mesRequireOrderPlanPreList;
        this.queryData = {
          tableData: mesRequireOrderPlanPreList,
          timeData: timeList,
          info: true,
        };
      } finally {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }
    },
    // 排期信息tab切换
    tabClick(e) {
      let { requireCode, scheduledCode } = this.tabPaneList[e.index];
      this.getRequirePlanPreList({
        requireCode,
        scheduledCode,
      });
    },
    async getPlanStatusList() {
      try {
        let res = await getPlanStatusList();
        let list = res.data.result;
        console.log(1111, list, this.requireStatus);
        list.forEach((v) => {
          if (v.value == this.requireStatus) {
            this.statusName = v.description;
          }
        });
        this.statusType = this.requireStatus == "30" ? "info" : "danger";
      } catch (error) {
        console.error(error);
      }
    },
  },
  async created() {
    try {
      this.loading = true;
      await this.getDetail();
      await this.getPlanStatusList();
    } finally {
      this.loading = false;
    }
  },
};
</script>
<style scoped lang="scss">
.detailsBox {
  padding: 0 10px;

  /deep/.el-tabs {
    height: 509px !important;
  }
  /deep/.is-left {
    text-align: left !important;
  }
  /deep/.el-tabs__nav-scroll {
    border: 1px solid #dedede;
  }
  /deep/.el-tabs__item {
    border-bottom: 1px solid #dedede;
  }
  /deep/.is-top {
    .el-tabs__nav-scroll {
      border: 0;
    }
  }
  /deep/.is-active {
    background: #226eb7;
    color: white;
  }
  .image__preview {
    margin-right: 12px;
  }
  .p-t-10 {
    padding-top: 10px;
  }
  .p-b-10 {
    padding-bottom: 10px;
  }
  .flex-box {
    display: flex;
    align-items: center;
    height: 90px;
    padding-top: 5px;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
  }
}
</style>
